<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('自定义视图分页')" />
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>房屋名称：</label>
                                <input type="text" name="name"/>
                            </li>
                            <li>
                                <label>房屋位置：</label>
                                <input type="text" name="location"/>
                            </li>
                            <li>
                                <label>房屋面积：</label>
                                <select name="params[areaFlag]">
                                    <option value="">所有</option>
                                    <option value="1">0~100</option>
                                    <option value="2">100~200</option>
                                    <option value="3">200以上</option>
                                </select>
                            </li>
                            <li>
                                <label>房屋价格：</label>
                                <select name="params[priceFlag]">
                                    <option value="">所有</option>
                                    <option value="1">1000以下</option>
                                    <option value="2">1000~2000</option>
                                    <option value="3">2000以上</option>
                                </select>
                            </li>
                            <li>
                                <label>租房类型：</label>
                                <select name="type">
                                    <option value="">所有</option>
                                    <option value="1">整租</option>
                                    <option value="2">合租</option>
                                </select>
                            </li>
                            <li>
                                <label>出租状态：</label>
                                <select name="rentStatus">
                                    <option value="">所有</option>
                                    <option value="1">未出租</option>
                                    <option value="2">已出租</option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-page-size="10" 
				       data-show-custom-view="true" data-custom-view="customViewFormatter"
                       data-show-custom-view-button="true">
                </table>
			</div>
		</div>
	</div>
	
    <template id="profileTemplate">
        <div class="col-sm-4">
            <div class="contact-box"  style="min-height: 200px">
                <a onclick="openInfo(%infoUrl%)">
                    <div class="col-sm-4">
                        <div class="text-center">
                            <img alt="image" class="img-circle m-t-xs img-responsive" src="%IMAGE%">
                            <div class="m-t-xs font-bold">%houseName%</div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        %tags%
                        <address>
                        位置: %location%<br>
                        </address>
                    </div>
                    <div class="clearfix"></div>
                 </a>
             </div>
        </div>
    </template>

    <div th:include="include :: footer"></div>
    <th:block th:include="include :: bootstrap-table-custom-view-js" />
    <script th:inline="javascript">
        var prefix = ctx + "admin/house";
        var datas = [[${@dict.getType('sys_normal_disable')}]];

        $(function() {
            var options = {
                url: prefix + "/listAll",
		        showRefresh: false,
		        showToggle: false,
		        showColumns: false,
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'houseId',
					title : '房屋ID'
				},
				{
					field : 'name',
					title : '房屋名称'
				},
                {
                    field : 'location',
                    title : '位置'
                }]
            };
            $.table.init(options);
        });
        
        function customViewFormatter (data) {
            let template = $('#profileTemplate').html()
            let view = ''
            $.each(data, function (i, row) {
              let str = '';
              let j = 0;
              row.houTags.map(item => {
                  let tag = ''
                  if(item.prior == 1){
                      tag = ' <span class="label label-primary" style="background-color: #510080; font-size: 10px">'+item.name+'</span>'
                  }else if(item.prior == 2){
                      tag = ' <span class="label label-primary" style="background-color: #ec9f12; font-size: 10px">'+item.name+'</span>'
                  }else if(item.prior == 3){
                      tag = ' <span class="label label-primary" style="background-color: #008018; font-size: 10px">'+item.name+'</span>'
                  }

                  if((j+1)%3 == 1){
                      tag = '<p>' + tag;
                  } else if((j+1)%3 == 0){
                      tag = tag + '</p>';
                  }
                  str += tag;
                  j++;
              });
              let imgUrl = "/img/house.png";
              if (row.houImage != null){
                  imgUrl = row.houImage.images;
              }
              view += template.replace('%infoUrl%', row.houseId)
                .replace('%IMAGE%', imgUrl)
                .replace('%houseName%', row.name)
                .replace('%tags%', str)
                .replace('%location%', row.location)
            })

            return `<div class="row mx-0">${view}</div>`
          }

        function openInfo(houseId){
            var url = prefix + '/houseInfo/' + houseId;
            $.modal.openTab("房源详细信息", url);
        }
    </script>
</body>
</html>